{% extends "base/base.html" %}

{% comment %}

 Copyright 2013 - Tom Alessi

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and 
 limitations under the License.

{% endcomment %}

{% block content %}

{% if updates %}
<script>
  // Set edit style to inline instead of popup
  $.fn.editable.defaults.mode = 'inline';
</script>
{% endif %}

<form method="POST" action="/admin/m_update">
{% csrf_token %}

<div class="row">
  {# This is a large-3 side nav #}
  {% include "admin/side_nav.html" %}

  <div class="large-9 columns">

    <div class="row">
      <div class="large-12 columns">
        <h1>Update Maintenance</h1>
        <p>To update this scheduled maintenance, complete the relevant fields below.</p>
        <hr>
      </div>
    </div>

    {# This is row consisting of 12 columns that will display all messages passed in the request #}
    {% include "admin/messages.html" %}

    <div class="row">
      <div class="large-8 columns">
        <span class="radius secondary label">Maintenance Update</span>
        &nbsp;<b><span id="update_counter" class="counter"></span></b>
        <div class="sublabel_container"><span class="sublabel">Enter an update about the scheduled maintenance, if desired.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns {% if form.update.errors %}error{% endif %}">
        <textarea id="update" name="update" placeholder="Enter an update" maxlength="1000">{% if form.update.data %}{{form.update.data}}{% endif %}</textarea>
        {% if form.update.errors %}
        <br><span class="err">{% for error in form.update.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    {% if updates %}
      <div class="spacer_small"></div>

      <div class="row">
        <div class="large-12 columns">
          <label>
            <span id="expand_updates" title="Modify previous event updates" class="foundicon-genenc-plus foundicon_container_expand"></span>&nbsp;Manage previous updates
          </label>
          <span class="sublabel">Edit or delete previously entered maintenance updates.</span>
          <div id="updates" style="display: none; padding: 15px 15px 15px 25px;">
            {% for update in updates %}
             <a href="/admin/m_update_delete?event_id={{id}}&id={{update.id}}" title="Delete update"><span class="foundicon-gen-trash foundicon_container_iconlink_small_trash"></span></a><span class="updates"><b>{{update.date|date:"Y-m-d H:i e"}}</b> - <a href="#" title="Modify update" id="update_{{update.id}}">{{update.update}}</a></span>
               
             <script>
             $(document).ready(function() {
               $('#update_{{update.id}}').editable({
                     url: '/admin/update_modify',
                     tpl: '<textarea maxlength="1000"></textarea>',
                     type: 'textarea',
                     pk: '{{update.id}}',
                     name: 'update',
                     inputclass: 'x_editable_update',
                     params: { csrfmiddlewaretoken: '{{csrf_token}}'},
                     error: function(response, newValue) {
                       return response.responseText;
                     }
                 });
             });
             </script>

             <br><br>

            {% endfor %}
          </div>
   
          <script>
           // Expand Slider
            $(function() {
              $("#expand_updates").click(function () {
                 $("#updates").slideToggle("fast");
                 if ($(this).hasClass("foundicon-genenc-plus")) {
                  //Remove the plus class and add the minus one
                  $(this).removeClass("foundicon-genenc-plus");
                  $(this).addClass("foundicon-genenc-minus");
                 } else if ($(this).hasClass("foundicon-genenc-minus")) {
                  // Remove the minus class and add the plus one
                  $(this).removeClass("foundicon-genenc-minus");
                  $(this).addClass("foundicon-genenc-plus");
                 }
              });
            });
          </script>

        </div>
      </div>
    {% endif %}

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-3 columns">
        <div class="row">
          <div class="large-12 columns">
            <span class="radius secondary label">Start Date/Time</span><br>
            <div class="sublabel_container"><span class="sublabel">Update the maintenance start date/time.</span></div>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.s_date.errors %}error{% endif %}">
            <input type="text" name="s_date" id="s_date" class="date" value="{% if form.s_date.data %}{{form.s_date.data}}{% else %}{{s_date}}{% endif %}"/>
            {% if form.s_date.errors %}
            <span class="err">{% for error in form.s_date.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}            
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.s_time.errors %}error{% endif %}">
            <input type="text" name="s_time" id="s_time" class="date" value="{% if form.s_time.data %}{{form.s_time.data}}{% else %}{{s_time}}{% endif %}"/>
            {% if form.s_time.errors %}
            <span class="err">{% for error in form.s_time.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}            
          </div>
        </div>
      </div>

      <div class="large-3 columns">
        <div class="row">
          <div class="large-12 columns">
            <span class="radius secondary label">End Date/Time</span><br>
            <div class="sublabel_container"><span class="sublabel">Update the maintenance end date/time.</span></div>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.e_date.errors %}error{% endif %}">
            <input type="text" name="e_date" id="e_date" class="date" value="{% if form.e_date.data %}{{form.e_date.data}}{% else %}{{e_date}}{% endif %}"/>
            {% if form.e_date.errors %}
            <span class="err">{% for error in form.e_date.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}            
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns {% if form.e_time.errors %}error{% endif %}">
            <input type="text" name="e_time" id="e_time" class="date" value="{% if form.e_time.data %}{{form.e_time.data}}{% else %}{{e_time}}{% endif %}"/>
            {% if form.e_time.errors %}
            <span class="err">{% for error in form.e_time.errors %}{{error}}<br>{% endfor %}<br></span>
            {% endif %}            
          </div>
        </div>
      </div>
      <div class="large 6 columns"></div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Maintenance Description</span>
        &nbsp;<b><span id="description_counter" class="counter"></span></b>
        <div class="sublabel_container"><span class="sublabel">Update the maintenance description, if desired.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns {% if form.description.errors %}error{% endif %}">
        <textarea id="description" name="description" placeholder="Enter maintenance description" maxlength="1000">{% if form.description.data %}{{form.description.data}}{% else %}{{details.0.description}}{% endif %}</textarea>
        {% if form.description.errors %}
        <br><span class="err">{% for error in form.description.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Impact Analysis</span>
        &nbsp;<b><span id="impact_counter" class="counter"></span></b>
        <div class="sublabel_container"><span class="sublabel">Enter or update the impact analysis, if desired.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns {% if form.impact.errors %}error{% endif %}">
        <textarea id="impact" name="impact" placeholder="Enter maintenance impact analysis" maxlength="1000">{% if form.impact.data %}{{form.impact.data}}{% else %}{% if details.0.event_impact__impact %}{{details.0.event_impact__impact}}{% endif %}{% endif %}</textarea>
        {% if form.impact.errors %}
        <br><span class="err">{% for error in form.impact.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns {% if form.coordinator.errors %}error{% endif %}">
        <span class="radius secondary label">Maintenance Coordinator</span>
        &nbsp;<b><span id="coordinator_counter" class="counter"></span></b>
        <div class="sublabel_container"><span class="sublabel">Enter or update the maintenance coordinator, if desired..</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns {% if form.coordinator.errors %}error{% endif %}">
        <textarea id="coordinator" name="coordinator" placeholder="Enter maintenance coordinator" maxlength="250">{% if form.coordinator.data %}{{form.coordinator.data}}{% else %}{% if details.0.event_coordinator__coordinator %}{{details.0.event_coordinator__coordinator}}{% endif %}{% endif %}</textarea>
        {% if form.coordinator.errors %}
        <br><span class="err">{% for error in form.coordinator.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Maintenance Status</span><br>
        <div class="sublabel_container"><span class="sublabel">Indicate whether the maintenance has started and/or has been completed.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <label><input type="checkbox" name="started" {% if form.started.data %}checked="on"{% else %}{% if details.0.status__status == 'started' %}checked="on"{% else %}{% if details.0.status__status == 'completed' %}checked="on"{% endif %}{% endif %}{% endif %}/>
        Started</label>
        {% if form.started.errors %}
        <span class="err">{% for error in form.started.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %} 
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <label><input type="checkbox" name="completed" {% if form.completed.data %}checked="on"{% else %}{% if details.0.status__status == 'completed' %}checked="on"{% endif %}{% endif %}/>
        Completed</label>
        {% if form.completed.errors %}
        <span class="err">{% for error in form.completed.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Email</span><br>
        <div class="sublabel_container"><span class="sublabel">Select the checkbox to broadcast an email to the specified recipient when this maintenance form is saved.{% if not email_enabled %}  This option is currently disabled because global email notifications are disabled - enable them <a href="/admin/email_config">here</a>.{% endif %}</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-6 columns">
        <label><input type="checkbox" {% if not email_enabled %}disabled{% endif %} name="broadcast" {% if form.broadcast.data %}checked{% endif %} />
        Broadcast Email On Save</label>
        {% if form.broadcast.errors %}
        <span class="err">{% for error in form.broadcast.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
        <select name="email_id" class="email" {% if not email_enabled == 1 %}disabled{% endif %}>
          {% if not email_enabled %}
            <option disabled selected>-- Email Functionality Disabled --</option>
          {% else %}
            <option disabled selected>Select Email</option>
          {% endif %}
         {% for email in emails %}
          {# We need to check if its a failed form submit and then if it set in the db #}
          {% if form.email_id.data|slugify == email.id|slugify %}
            <option value="{{email.id}}" {% if email_enabled %}selected="true"{% endif %}>{{email.email}}</option>
          {% else %} 
            {% if details.0.event_email__email__id == email.id %}
              <option value="{{email.id}}" {% if email_enabled %}selected="true"{% endif %}>{{email.email}}</option>
            {% else %}
              <option value="{{email.id}}">{{email.email}}</option>
            {% endif %}
          {% endif %}
         {% endfor %}
         </select>
      </div>
    </div>

    <div class="spacer_medium"></div>

    <div class="row">
      <div class="large-12 columns">
        <span class="radius secondary label">Services Impacted</span><br>
        <div class="sublabel_container"><span class="sublabel">Select all services that are impacted by this scheduled maintenance.</span></div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        {% for row in services %}
          {# See if this service was previously selected and this is a failed form submit #}
          {# On a failed form the list is unicode values and on a GET they are ints so we have to check both #}
          <label><input type="checkbox" name="service" value="{{row.id}}" {% if row.id|slugify in affected_svcs %}checked{% else %}{% if row.id in affected_svcs %}checked{% endif %}{% endif %}/>
          {{row.service_name}}</label>
        {% endfor %}
        {% if form.service.errors %}
        <span class="err">{% for error in form.service.errors %}{{error}}<br>{% endfor %}<br></span>
        {% endif %}
      </div>
    </div>

    <div class="spacer_small"></div>

    <div class="row">
      <div class="large-12 columns">
        <input type="submit" class="small button secondary" value="save"/>
      </div>
    </div>

    <input type="hidden" name="id" value="{{id}}">

  </div>
</div>

</form>



<script type="text/javascript">

   // Date Pickers and Submit
   $(function() {

      //Start Date
      $("#s_date").datepicker({dateFormat: 'yy-mm-dd'});

      //Start Time
      $("#s_time").timepicker({
          hourGrid: 4,
          minuteGrid: 10
      });

      //End Date
      $("#e_date").datepicker({dateFormat: 'yy-mm-dd'});

      //End Time
      $("#e_time").timepicker({
          hourGrid: 4,
          minuteGrid: 10
      });
   });

  $("#update").keyup(function(){
    $("#update_counter").text("Characters remaining: " + (1000 - $(this).val().length));
  });

  $("#description").keyup(function(){
    $("#description_counter").text("Characters remaining: " + (1000 - $(this).val().length));
  });

  $("#impact").keyup(function(){
    $("#impact_counter").text("Characters remaining: " + (1000 - $(this).val().length));
  });

  $("#coordinator").keyup(function(){
    $("#coordinator_counter").text("Characters remaining: " + (250 - $(this).val().length));
  });


</script>

{% endblock %}



